<template>
  <div
    class="enterprise-statistics-container animate__animated"
    :class="[visible ? 'animate__fadeIn' : 'animate__fadeOut']"
  >
    <div class="card-container">
      <div class="statistics-card">
        <div class="icon"></div>
        <div class="score">
          <div class="total">
            {{ staticHeadData.score || "-" }}<span>分</span>
          </div>
          <div class="tip">总综合评分</div>
        </div>
      </div>
      <div class="statistics-card">
        <div class="icon"></div>
        <div class="score">
          <div class="total">
            {{ staticHeadData.ownScore || "-" }}<span>分</span>
          </div>
          <div class="tip">总自评分</div>
        </div>
      </div>
      <div class="statistics-card">
        <div class="icon"></div>
        <div class="score">
          <div class="total">
            {{ staticHeadData.totalScore || "-" }}<span>分</span>
          </div>
          <div class="tip">总分</div>
        </div>
      </div>
      <div class="statistics-card">
        <div class="icon"></div>
        <div class="score">
          <div class="total">
            {{ staticHeadData.applyProjectNumber || "-" }}<span>个</span>
          </div>
          <div class="tip">申请项目数</div>
        </div>
      </div>
      <div class="statistics-card">
        <div class="icon"></div>
        <div class="score">
          <div class="total">
            {{ staticHeadData.bujiCount || "-" }}/
            {{ staticHeadData.shengjiCount || "-" }}/
            {{ staticHeadData.shijiCount || "-" }}<span>个</span>
          </div>
          <div class="tip">部级/省级/市级项目数</div>
        </div>
      </div>
    </div>
    <div class="index-container">
      <div class="index-card">
        <div class="title">一级指标综合评分<span>（分/%） </span></div>
        <div class="index-table">
          <div class="thead flex">
            <div class="th">排名</div>
            <div class="th">一级指标</div>
            <div class="th">评分/自评分/总分</div>
            <div class="th">得分率</div>
          </div>
          <div class="tbody">
            <a-empty :image="simpleImage" v-if="firstData.length == 0" />
            <div
              class="tr flex"
              v-for="(item, index) in firstData"
              :key="index"
              :class="firstId == item.id && 'active'"
              @click="chooseLevel(item, 1)"
            >
              <div class="td index">
                <span :data-index="index + 1"></span>
              </div>
              <div class="td" :title="item.name">
                {{ item.name }}
              </div>
              <div class="td score">
                <span>{{ item.score || 0 }} </span>/<span>
                  {{ item.ownScore || 0 }}</span
                >/<span>{{ item.totalScore || 0 }}</span>
              </div>
              <div class="td pec flex">
                <div class="bar">
                  <div :style="{ width: (item.radio || 0) + '%' }"></div>
                </div>
                <div class="pec-val">{{ item.radio || 0 }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-card">
        <div class="title">二级指标综合评分<span>（分/%） </span></div>
        <div class="index-table">
          <div class="thead flex">
            <div class="th">排名</div>
            <div class="th">二级指标</div>
            <div class="th">评分/自评分/总分</div>
            <div class="th">得分率</div>
          </div>
          <div class="tbody">
            <a-empty :image="simpleImage" v-if="twoData.length == 0" />
            <div
              class="tr flex"
              :class="twoId == item.uuid && 'active'"
              v-for="(item, index) in twoData"
              :key="index"
              @click="chooseLevel(item, 2)"
            >
              <div class="td index">
                <span :data-index="index + 1"></span>
              </div>
              <div class="td" :title="item.name">
                {{ item.name }}
              </div>
              <div class="td score">
                <span>{{ item.score || 0 }} </span>/<span>
                  {{ item.ownScore || 0 }}</span
                >/<span>{{ item.totalScore || 0 }}</span>
              </div>
              <div class="td pec flex">
                <div class="bar">
                  <div :style="{ width: (item.radio || 0) + '%' }"></div>
                </div>
                <div class="pec-val">{{ item.radio || 0 }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-card">
        <div class="title">三级指标综合评分<span>（分/%） </span></div>
        <div class="index-table">
          <div class="thead flex">
            <div class="th">排名</div>
            <div class="th">三级指标</div>
            <div class="th">评分/自评分/总分</div>
            <div class="th">得分率</div>
          </div>
          <div class="tbody">
            <a-empty :image="simpleImage" v-if="threeData.length == 0" />
            <div
              class="tr flex"
              v-for="(item, index) in threeData"
              :key="index"
            >
              <div class="td index">
                <span :data-index="index + 1"></span>
              </div>
              <div class="td" :title="item.name">
                {{ item.name }}
              </div>
              <div class="td score">
                <span>{{ item.score || 0 }} </span>/<span>
                  {{ item.ownScore || 0 }}</span
                >/<span>{{ item.totalScore || 0 }}</span>
              </div>
              <div class="td pec flex">
                <div class="bar">
                  <div :style="{ width: (item.radio || 0) + '%' }"></div>
                </div>
                <div class="pec-val">{{ item.radio || 0 }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//企业数据统计
import { Empty } from "ant-design-vue";
import {
  getStaticHead,
  getStaticFirst,
  getStaticTwo,
  getStaticThree,
} from "@/api/qualityEngineering";
export default {
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    dataType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      colSpan: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 24,
        xl: 12,
        xxl: 8,
      },
      firstData: [],
      twoData: [],
      threeData: [],
      staticHeadData: {},
      firstId: "",
      twoId: "",
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      Promise.all([
        this.getStaticHead(),
        this.getStaticFirst(),
        this.getStaticTwo(),
        this.getStaticThree(),
      ]);
    },
    //查询头部统计数据
    getStaticHead() {
      return new Promise((resolve, reject) => {
        let { orgCode, childOrgCode } = this.treeItem;
        getStaticHead({ tenantCode: orgCode, childOrgCode: childOrgCode })
          .then((res) => {
            this.staticHeadData = res?.data ?? {};
            resolve();
          })
          .catch((_) => {
            this.staticHeadData = {};
            reject();
          });
      });
    },
    //查询一级指标
    getStaticFirst() {
      return new Promise((resolve, reject) => {
        let { orgCode, childOrgCode } = this.treeItem;
        getStaticFirst({ tenantCode: orgCode, childOrgCode: childOrgCode })
          .then((res) => {
            this.firstData = res?.data || [];
            resolve();
          })
          .catch((_) => {
            this.firstData = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询二级指标
    getStaticTwo(uuid = "") {
      return new Promise((resolve, reject) => {
        let { orgCode, childOrgCode } = this.treeItem;
        getStaticTwo({
          firstId: uuid,
          tenantCode: orgCode,
          childOrgCode: childOrgCode,
        })
          .then((res) => {
            this.twoData = res?.data || [];
            resolve();
          })
          .catch((_) => {
            this.twoData = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询三级指标
    getStaticThree(uuid = "") {
      return new Promise((resolve, reject) => {
        let { orgCode, childOrgCode } = this.treeItem;
        getStaticThree({
          twoId: uuid,
          tenantCode: orgCode,
          childOrgCode: childOrgCode,
        })
          .then((res) => {
            this.threeData = res?.data || [];
            resolve();
          })
          .catch((_) => {
            this.threeData = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    chooseLevel(item = {}, level) {
      let { uuid } = item;
      switch (level) {
        case 1:
          this.getStaticTwo(uuid);
          this.getStaticThree();
          break;

        case 2:
          this.getStaticThree(uuid);
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.enterprise-statistics-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .card-container {
    box-sizing: border-box;
    padding: 20px 0 0 0;
    display: flex;
    .statistics-card {
      background: @base-bg-color;
      flex: 1;
      flex-shrink: 0;
      height: 140px;
      border-radius: 6px 6px 6px 6px;
      margin-right: 20px;
      margin-bottom: 20px;
      &:last-of-type {
        margin-right: 0;
      }
      display: flex;
      align-items: center;
      .icon {
        width: 72px;
        height: 72px;
        margin: 0 20px;
      }
      .score {
        .total {
          font-size: 36px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          span {
            padding-left: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
          }
        }
        .tip {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
        }
      }
    }
    :nth-child(1) {
      &.statistics-card {
        background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_bg_1.png);
        background-size: 100% 100%;
        .icon {
          background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_1.png);
          background-size: 100% 100%;
        }
      }
    }
    :nth-child(2) {
      &.statistics-card {
        background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_bg_2.png);
        background-size: 100% 100%;
        .icon {
          background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_2.png);
          background-size: 100% 100%;
        }
      }
    }
    :nth-child(3) {
      &.statistics-card {
        background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_bg_3.png);
        background-size: 100% 100%;
        .icon {
          background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_3.png);
          background-size: 100% 100%;
        }
      }
    }
    :nth-child(4) {
      &.statistics-card {
        background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_bg_4.png);
        background-size: 100% 100%;
        .icon {
          background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_4.png);
          background-size: 100% 100%;
        }
      }
    }
    :nth-child(5) {
      &.statistics-card {
        background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_bg_5.png);
        background-size: 100% 100%;
        .icon {
          background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_5.png);
          background-size: 100% 100%;
        }
      }
    }
  }
  .index-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    .index-card {
      height: 100%;
      flex: 1;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: @base-bg-color;
      border-radius: 4px;
      box-sizing: border-box;
      margin-right: 18px;
      &:last-of-type {
        margin-right: 0;
      }
      .title {
        display: flex;
        align-items: center;
        padding: 0 24px;
        height: 56px;
        font-size: 18px;
        flex-shrink: 0;
        border-bottom: 1px solid @border-color;
        span {
          color: #999da5;
          font-size: 14px;
          margin-left: 6px;
        }
      }
      .index-table {
        flex: 1;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .thead {
          margin-bottom: 10px;
          flex-shrink: 0;
          .th {
            &:nth-child(1) {
              width: 70px;
              flex-shrink: 0;
              text-align: center;
            }
            &:nth-child(2) {
              width: 140px;
              flex-shrink: 0;
            }
            &:nth-child(3) {
              width: 120px;
              flex-shrink: 0;
              text-align: center;
            }
            &:nth-child(4) {
              flex: 1;
              margin-left: 30px;
            }
          }
        }
        .tbody {
          flex: 1;
          overflow: auto;
          position: relative;
          .tr {
            height: 64px;
            background-color: @layout-bg-color;
            border-radius: 4px;
            align-items: center;
            color: #333;
            color: @title-color;
            transition: 0.3s;
            border: 1px solid transparent;
            cursor: pointer;
            &:hover,
            &.active {
              background: rgba(22, 119, 255, 0.1);
              border: 1px solid #1677ff;
            }
            &:not(:last-child) {
              margin-bottom: 16px;
            }
            .td {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &.index {
                justify-content: center;
                display: flex;
                span {
                  width: 24px;
                  height: 24px;
                  background: #d2dcf0;
                  border-radius: 12px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  &::after {
                    content: attr(data-index);
                    font-size: 14px;
                    color: @primary-color;
                  }
                }
              }
              &:nth-child(1) {
                width: 70px;
                flex-shrink: 0;
                text-align: center;
              }
              &:nth-child(2) {
                width: 140px;
                flex-shrink: 0;
              }
              &:nth-child(3) {
                width: 120px;
                flex-shrink: 0;
                text-align: center;
              }
              &:nth-child(4) {
                flex: 1;
                margin-left: 30px;
              }
              &.pec {
                align-items: center;
                .bar {
                  flex: 1;
                  height: 8px;
                  background: #ebebeb;
                  border-radius: 4px;
                  overflow: hidden;
                  div {
                    width: 60%;
                    height: 100%;
                    border-radius: 4px;
                    background: @primary-color;
                  }
                }
                .pec-val {
                  width: 60px;
                  flex-shrink: 0;
                  margin-left: 10px;
                  color: #1677ff;
                }
              }
            }
            .score {
              :nth-child(1) {
                color: #00c1b6;
              }
              :nth-child(2) {
                color: #1677ff;
              }
              :nth-child(3) {
                color: @title-color;
              }
            }

            &:nth-child(1) {
              .td.index {
                span {
                  background: url(https://jszhgd.cn/static/pc/quality-engineering-app/one.png);
                  width: 22px;
                  height: 28px;
                  border-radius: 0;
                  &::after {
                    display: none;
                  }
                }
              }
            }
            &:nth-child(2) {
              .td.index {
                span {
                  background: url(https://jszhgd.cn/static/pc/quality-engineering-app/two.png);
                  width: 22px;
                  height: 28px;
                  border-radius: 0;
                  &::after {
                    display: none;
                  }
                }
              }
            }
            &:nth-child(3) {
              .td.index {
                span {
                  background: url(https://jszhgd.cn/static/pc/quality-engineering-app/three.png);
                  width: 22px;
                  height: 28px;
                  border-radius: 0;
                  &::after {
                    display: none;
                  }
                }
              }
            }
          }
          /deep/.ant-empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
}
</style>
